<%@ page import="cleanstarxchange.server.*"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="java.text.DecimalFormat"%>
<%@ page import="java.util.Collections"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

<%
	//getting the userID from tinycanvas.jsp page
	Integer uid = Integer.parseInt(request.getParameter( "uid" ));
	//initialize datastore onbeject for connecting to google datastore
	DataStore ds = new DataStore();
	//getting the user object of the current user from datastore
	User user = ds.getUser( new Long(uid) );
	//getting the balance of the user
	double balance = user.getBalance();
	//setting the format of balace to make it easier to read
	DecimalFormat twoDForm = new DecimalFormat("#.##");
	balance = Double.valueOf(twoDForm.format(balance));	
	//getting all the stocks from datastore in an arraylist
	ArrayList<Stock> allStocks = ds.getStock();
	//soritng the stocks by name
	Collections.sort(allStocks);
	//String totalGraph = ds.getTotalGraph();
	
	//Getting the sorted users list for ranking
	ArrayList<User> users = ds.getUser();
	Collections.sort(users);
	
	//close the connection with DataStore
	ds.close();
%>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>StarXChange</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="twoColElsLtHdr">
<!-- container wraps the whole contents of the webpage -->
<div id="container">
  <!-- header contains the logo of our application which links to index.jsp page -->
  <div id="header"><a href="index.jsp?uid=<%=uid%>"><img src="media/logo.jpg"/></a><!-- end #header --></div>
  <!-- sidebar contains the menu to navigate the application -->
  <div id="sidebar1">
   <ul class="sidenav">
				<li>
                	<a href="portfolio.jsp?uid=<%=uid%>" title="My Portfolio">My Portfolio
                    <span>See how rich I am</span>
                    </a>
                    
                </li>
			    <li>
                	<a href="stocklist.jsp?uid=<%=uid%>" title="Stocks">Stocks
                    <span>See the market flow</span>
                    </a>
                </li>
				<li>
                	<a href="rank.jsp?uid=<%=uid%>" title="Rank">Rank
                    <span>Who is the winner now</span>
                    </a>
                </li>
				<li>
                	<a href="howtoplay.jsp?uid=<%=uid%>" title="HowToPlay">How To Play
                    <span>Learn how to play the game</span>
                    </a>
                </li>
			</ul>
    
  <!-- end #sidebar1 --></div>
  <!-- mainContent displays greeting msg, the balace of the user and the hot/cold stocks on the market -->
  <div id="mainContent">
    <div id="uinf">
    			Welcome to StarXChange <%=user.getFirstName()%> <%=user.getLastName()%>. You have $<%=balance%>
    		</div>
    		<!-- Hot stocks section -->
    		<div style="float:left">
        		<h1> Hot Stocks </h1>
    			<!-- making a tablef or top 3 hot stocks -->
    			<div id="shortcut">
    				<table width="95%" border="0" cellspacing="2" cellpadding="2">
  						<tr>
    						<th scope="col">Stock Name</th>
    						<th scope="col">Current Price</th>
    						<th scope="col">U/D</th>
  						</tr>
  					<%//getting top 3 hot stocks(stocks with most positive movement on the price
  					  	int i;
  					    //setting the number of stocks to display
  					    int numOfStocksToDisplay=3;
  						for(i=1; i<=numOfStocksToDisplay; i++ ){ 
  							int j = i-1;
  							Stock current = allStocks.get(j);
  							//getting the price of stock
  							double price = current.getCurrentPrice();
  							//display the movement in price in terms of %
  							double percent = (price-current.getPreviousPrice(5))/current.getPreviousPrice(5);
  							percent = percent * 100;
  							//setting the format of the percent for easier read
  							percent = Double.valueOf(twoDForm.format(percent));
  							
  							String color;
  						    //if the price of the stock is moving up display it with green color
  							if( percent > 0 ) color = "#00ff00";
  						    //if the price of the stock is moving down display it with red color
							else if( percent < 0 ) color = "#ff0000";
  						    //if there is no movement in price display it in black
							else color = "#000000";
  					%>
  						<tr>
    						<td><%=current.getName()%></td>
    						<td>$<%=price%></td>
    						<td><span style="color:<%=color%>"><%=percent %>%</span></td>
  						</tr>
  					<%}
  					%>
  					</table>
  				</div>
  			</div>
  			<!-- Cold Stocks section -->
  			<div style="float:left">
  				<h1> Cold Stocks </h1>
    			<div id="shortcut">
    				<table width="95%" border="0" cellspacing="2" cellpadding="2">
  						<tr>
    						<th scope="col">Stock Name</th>
    						<th scope="col">Current Price</th>
    						<th scope="col">U/D</th>
  						</tr>
  					<%
  						//repeat the calculation for the worst 3 stocks
  						int j;
  						for(i=1; i<=numOfStocksToDisplay; i++ ){ 
  						Stock current = allStocks.get( allStocks.size()-i );
  						double price = current.getCurrentPrice();
  						double percent = (price-current.getPreviousPrice(5))/current.getPreviousPrice(5);
  						percent = percent * 100;
  						percent = Double.valueOf(twoDForm.format(percent));
  						String color;
  						if( percent > 0 ) color = "#00ff00";
						else if( percent < 0 ) color = "#ff0000";
						else color = "#000000";
  					%>
  						<tr>
    						<td><%=current.getName()%></td>
    						<td>$<%=price%></td>
    						<td><span style="color:<%=color%>"><%=percent %>%</span></td>
  						</tr>
  					<%}
  					%>
  					</table>
  				</div>	
  			</div>

	<!-- end #mainContent --></div>
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
   <!-- footer will contain the current ranking of the users -->
   <div id="footer">
   		
   		<!-- these scripts are needed for facebook connection -->
   		<div>		
			<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></script>
			<script type="text/javascript">
   			 	FB.init("da4966aa1343e2d06cf00512c0fdc94e", "xd_receiver.htm");
			</script>
		</div>
		
   		<!-- making a table for ranking -->
   		<div>
   			<table width="95%" border="0" cellspacing="2" cellpadding="2">
  				<%
   					//getting the user id for the rank from the sorted user list
  					for(int it=0; it<users.size();it++){
   						User current = users.get(it);
   						Long userID = current.getUserID();
   				%>
   				<div id="shortcut" heignt="100px" width="60px" style="float:left" align="center">
   					<!-- this is the ranking -->
   					<p><%=it+1 %><br/>
   					   <!-- this is the profile picture -->
   					   <fb:profile-pic uid="<%=userID %>" width="50px" height="75px" ></fb:profile-pic><br/>
   					   <!-- this is the firstname of the user -->
   					   <fb:name firstnameonly="true" uid="<%=userID %>"></fb:name></p>

   				</div>	
   				
   				<%} %>
   					  						
  					
   		</div>  		
 <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
